<template>
  <div>
    <PageTools>
      <template #before>
        <el-button type="primary" @click="Addpage">添加页面</el-button>
      </template>
      <template #after>
        <el-input v-model="containsinput" placeholder="请输入关键字" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="searchcontains" />
        </el-input>
      </template>
      <template #main>
        <el-card class="box-card">
          <el-table
            style="width: 100%"
            :data="pageList"
            border
          >
            <el-table-column
              prop="title"
              label="标题"
              width="300"
            />
            <el-table-column
              prop="content"
              label="内容"
            >

              <template #default="{row}">
                <el-scrollbar style="height:100%">
                  <div class="myNote" v-html="row.content" />
                </el-scrollbar>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="PageEdit(scope.row.id)"
                >编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="PageDelete(scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <dialogdemo :isshowdialog.sync="isshowdialog" :pagedetails="Pagedetails" :title="dialogtitle" @UpdateList="GetPageList" />
      </template>
      <template #footer>
        <el-pagination
          small
          layout="prev, pager, next"
          :page-size="pageConfig._limit"
          :total="total"
          :current-page.sync="currentPage"
          @current-change="currentchange"
        />
      </template>
    </PageTools>
  </div>

</template>

<script>
import dialogdemo from '@/views/page/components/dialogdemo.vue'
import { getPageList, DeletePage, getPagedetails, getPagecount } from '@/api/page'
export default {
  components: {
    dialogdemo
  },
  data() {
    return {
      pageList: [],
      isshowdialog: false,
      Pagedetails: {},
      dialogtitle: '新增页面',
      pageConfig: {
        _limit: 3,
        _start: 0,
        title_contains: ''
      },
      containsinput: '',
      total: 1,
      currentPage: 1
    }
  },
  created() {
    this.GetPageList()
  },
  methods: {
    async GetPageList() {
      const list = await getPageList(this.pageConfig)
      const totalnum = await getPagecount(this.pageConfig)
      this.total = totalnum.data
      this.pageList = list.data
    },
    async PageEdit(id) {
      this.dialogtitle = '编辑页面'
      const { data } = await getPagedetails(id)
      this.Pagedetails = data
      this.isshowdialog = true
    },
    async PageDelete(row) {
      try {
        await this.$confirm('您确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await DeletePage(row.id)
        if (this.pageList.length === 1 && this.pageConfig._start !== 0) {
          this.pageConfig._start = this.pageConfig._start - this.pageConfig._limit
        }
        await this.GetPageList()
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
      }
    },
    Addpage() {
      this.dialogtitle = '添加页面'
      this.Pagedetails = {}
      this.isshowdialog = true
    },
    searchcontains() {
      this.pageConfig._start = 0
      this.pageConfig.title_contains = this.containsinput
      this.GetPageList()
      getPagecount()
    },
    currentchange(page) {
      this.pageConfig._start = this.pageConfig._limit * (page - 1)
      this.GetPageList()
    },
    Esc(err) {
      console.log(err)
    }
  }
}
</script>

<style scoped>
.myNote{
height: 280px;
overflow:auto
}
</style>
